<template>
	<view class="wrap-flex">
		<mo-status-bar/>
		<mo-swiper-list 
		ref="swiperList"
		@onChange="barChange"
		:nowSubList="nowSubList"
		:params="params"
		:current="current"
		:tabList="tabList">
			<template #header="{ page, itemIndex }">
				<mo-scrollbar 
				:list="page.statistics" 
				:bar-index="itemIndex"
				:current="nowSubList[itemIndex]._index"
				:enable-flex="true"
				@onChange="subNavClick">
					<template v-slot="{ tabItem }">
						<view class="subnav-item f28">{{tabItem.name}}</view>
					</template>
				</mo-scrollbar>
			</template>
			<!-- <template #top>
				<view class="inner f26 gray pt20">选项：{{params}} / {{nowGenderName}}</view>
            </template> -->
			<template v-slot="{ page, itemIndex, nowSubList}">
				<view v-if="nowGender.name" class="inner f26 gray pt20">{{page.name}} / {{nowGender.name}}</view>
				
				<view class="pannel">
					<view class="flex flex-items-center flex-between">
						<image class="img" mode="heightFix" v-for="el in nowSubList[itemIndex].bookCovers" :key="el" :src="el"></image>
					</view>
				</view>

				<view class="pannel" v-for="item in page.data" :key="item.name">
					<view class="swiper-item-list">
						
						<view class="flex flex-between">
							<view class="books-pic">
								<image class="pic" mode="widthFix" :src="item.cover"></image>
							</view>
							<view class="flex-1 ml20">
								<view class="flex flex-between">
									<text class="f34 ellipsis">{{ item.title }}</text>
									<text class="f26 yellow">{{ item.latelyFollower }}</text>
								</view>
								<view class="f24 mt15 clamp2 gray">{{ item.shortIntro }}</view>
								<view class="f24 mt15 gray">
									<text>{{ item.author+' ' }} </text> 
									<text v-if="item.minorCate"> | {{ item.minorCate }}</text>
								</view>
								<!-- <view class="f24 mt15">作者 - {{ item.author }}</view> -->

							</view>

						</view>
					</view>
				</view>
            </template>
		</mo-swiper-list>
	</view>
</template>

<script>
	// import swiperPage from '@/components/mo-swiper-list/swiper-page.vue'
	import { mapActions, mapState } from 'vuex'
    import { testApi, staticURL } from '@/api'
	export default {
		components: {
			// swiperPage
		},
		data() {
			return {
                tabList: [],
				current: 1,
				subCurrent: 1,
				major: '',
				nowSubList: {}
			}
		},
		computed:{
			...mapState('novel', ['statistic', 'gender']),
			nowStatis(){
				return Object.values(this.statistic)[this.current]
			},
			nowGender(){
				return this.nowSubList&&this.nowSubList[this.current]
			},
			params(){
				return {
					gender: this.nowStatis&&this.nowStatis.key?this.nowStatis.key:'',
					genderLabel: this.nowStatis&&this.nowStatis.label?this.nowStatis.label:'',
					major: this.nowGender&&this.nowGender.name?this.nowGender.name:''
				}
			}
		},
		async onLoad(){
			// 获取分类
			await this.getStatistics()
			await this.getGender()
			this.tabList = Object.keys(this.statistic).reduce((t,key,i)=>{
				this.statistic[key].data.forEach(el=>{
					el.bookCovers = el.bookCover.map(item=>{
						let url = staticURL + item
						// #ifdef MP-WEIXIN
						url = 'https:' + url
						// #endif
						return url
					})
				})
				const data = {
                    id: "tab" + i,
                    name: this.statistic[key].label,
                    pageid: i + 1,
					statistics: this.statistic[key].data,
					action: this.getCategories
				}
				return t.concat(data)
			},[])
			this.initSubList()
		},
		onShow(){
		},
		methods: {
			...mapActions('novel',['getStatistics', 'getGender', 'getCategories']),
			async initSubList(){
				let css = Object.values(this.statistic).reduce((t,c,i)=>{
					t[i] = {_index:this.subCurrent,...c.data[this.subCurrent]}
					return t
				},{})
				this.nowSubList = JSON.parse(JSON.stringify(css))
				// await this.getCategories(this.params)
				// console.log('params 1',this.params)
			},
			async barChange(bar){
				this.current = bar._index
				console.log(113,bar,this.nowSubList)
				// await this.getCategories(this.params)
				// console.log('params 2',this.params)
				// this.$refs.swiperList&&this.$refs.swiperList.loadTabData(this.current)
			},
			async subNavClick(nav) {
				this.subCurrent = nav._index
				if(this.current!=nav.barIndex) return
				this.nowSubList[this.current] = JSON.parse(JSON.stringify(nav))
				// console.log(124,nav,this.nowGender)
				// await this.getCategories(this.params)
				// console.log('params 3',this.$refs.swiperList)
				this.$refs.swiperList&&this.$refs.swiperList.loadTabData(this.current)
			},
            action(page=1, size=10, param={}, total){
                const params = {
					test: '传入的测试数据',
                    ...param
				}
                return testApi(page, size, params, total)
            },
		}
	}
</script>

<style lang="scss" scoped>
	$theme-color: rgb(255, 165, 104);
	$am-color: rgb(8, 201, 95);
	$pm-color: rgb(235, 148, 35);
	$act-color: rgb(50, 105, 223);
	page{
		background: #f8f8f8;
	}
	.wrap-flex{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		height: calc(100vh);
		/* #ifndef MP-WEIXIN */
		height: calc(100vh - 50px - constant(safe-area-inset-bottom));
		height: calc(100vh - 50px - env(safe-area-inset-bottom));
		/*  #endif  */
		mo-swiper-list{
			flex: 1;
		}
	}
	.pannel{
		padding: 10rpx 0;
	}
	.img{
		height: 320rpx;
	}
	.swiper-item-list {
		padding: 30rpx;
		margin: 0 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 16rpx rgba($color: #000000, $alpha: .05);
	}
	.subnav-item{
		padding: 20rpx;
		background: #fff;
	}
	.books-pic{
		width: 120rpx;
		.pic{
			width: 100%;
			border-radius: 10rpx;
		}
	}
</style>

